<template>
  <view :class="[$attrs.class]">
    <!-- 水平选项卡 -->
    <view class="flex overflow-x-auto overflow-y-hidden scrollbar-hide csum" v-if="direction === 'horizontal'">
      <view v-for="(tab, idx) in list" :key="tab.key || idx" @click="active = idx">
        <slot name="tab" :tab="tab" :idx="idx" :active="idx === active">
          <text class="text-[28rpx]">tab</text>
        </slot>
      </view>
    </view>

    <!-- 竖直选项卡 -->
    <view class="flex h-full flex-col overflow-y-auto scrollbar-hide" v-if="direction === 'vertical'">
      <view v-for="(tab, idx) in list" :key="tab.key || idx" @click="active = idx">
        <slot name="tab" :tab="tab" :idx="idx" :active="idx === active">
          <text class="text-[28rpx]">tab</text>
        </slot>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { computed, defineProps } from "vue";

const props = defineProps({
  list: {
    type: Array as () => Array<{ key?: string | number; [key: string]: any }>,
    default: () => [],
  },
  direction: {
    type: String,
    default: "horizontal",
    validator: (val: string) => ["horizontal", "vertical"].includes(val),
  },
});

const active = defineModel("active", {
  type: Number,
  default: 0,
});
</script>
